<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <style>
        html, body {
            height: 100%; /* 保持全屏高度 */
            margin: 0;
            padding: 0;
        }
        body {
            background-image: url('beijing.jpg'); /* 背景图片 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* 背景图片固定 */
            height: 100vh; /* 设置为视口高度 */
        }
        .overlay {
            background-color: rgba(0, 0, 0, 0.5); /* 背景的半透明黑色遮罩层 */
            position: fixed; /* 确保遮罩层覆盖整个页面 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .register-container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            border: none;
            border-radius: 10px; /* 更大的圆角 */
            background-color: rgba(255, 255, 255, 0.9); /* 白色背景，稍有透明 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 更明显的阴影效果 */
            position: relative;
            z-index: 2; /* 保持在遮罩层之上 */
        }
        .form-control {
            border-radius: 30px;
            padding: 15px;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .btn-primary {
            border-radius: 30px;
            padding: 10px 20px;
            background-color: #0072ff;
            border: none;
            transition: background-color 0.3s;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .logo {
            position: absolute;
            top: 20px; /* 调整上边距以适应更大的图片 */
            left: 20px; /* 调整左边距 */
            width: 240px; /* 增加宽度 */
            height: auto; /* 确保高度自动调整 */
            z-index: 2; /* 确保 logo 在遮罩层和背景图上方 */
        }
        /* 链接样式 */
        .text-center a {
            color: #0072ff;
            font-weight: bold;
        }
        .text-center a:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        /* 版权声明样式 */
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            color: white; /* 字体颜色为白色 */
            font-size: 14px; /* 字体大小 */
            z-index: 2;
        }
    </style>
</head>
<body>

<!-- 背景的黑色遮罩层 -->
<div class="overlay"></div>

<!-- 左上角的 logo 图片 -->
<img src="logo.png" alt="Logo" class="logo">

<div class="container mt-5">
    <div class="register-container">
        <h2 class="text-center">用户注册</h2>
        <!-- 显示错误信息 -->
        <div id="error-message" class="alert alert-danger" role="alert" style="display:none;"></div>
        <form id="register-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="form-group">
                <label for="confirm-password">确认密码</label>
                <input type="password" class="form-control" id="confirm-password" name="confirm-password" placeholder="请确认密码" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">注册</button>
        </form>
        <div class="text-center mt-3">
            <a href="login.html">已有账户？登录</a>
        </div>
    </div>
</div>

<!-- 版权声明 -->
<div class="footer">
    版权所有 © 2024 TUST 计算机科学与探索期刊管理系统
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const registerForm = document.getElementById("register-form");
        const errorMessage = document.getElementById("error-message");

        registerForm.addEventListener("submit", function(event) {
            event.preventDefault(); // 防止默认表单提交

            // 获取表单数据
            const username = document.getElementById("username").value;
            const email = document.getElementById("email").value;
            const password = document.getElementById("password").value;
            const confirmPassword = document.getElementById("confirm-password").value;

            // 确认密码一致性
            if (password !== confirmPassword) {
                errorMessage.textContent = "密码不一致";
                errorMessage.style.display = "block";
                return;
            }

            // 发送 Ajax 请求
            fetch("/user/register", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    username: username,
                    email: email,
                    password: password
                })
            })
                .then(response => {
                    if (!response.ok) {
                        // 如果响应状态不在 200-299 之间，抛出错误
                        return response.text().then(text => { throw new Error(text); });
                    }
                    return response.text(); // 处理成功的响应
                })
                .then(responseText => {
                    alert(responseText); // 提示注册成功
                    window.location.href = "login.html"; // 注册成功后跳转到登录页面
                })
                .catch(error => {
                    errorMessage.textContent = error.message || "注册失败"; // 显示错误信息
                    errorMessage.style.display = "block";
                });
        });
    });
</script>
</body>
</html>